import './index.scss'
import { HomeOutlined, SearchOutlined, ProfileOutlined, UserOutlined } from '@ant-design/icons'
import { withRouter } from 'react-router-dom'
import { useState } from 'react'
type Props = {
  history: any
}

function IndexCom(props: Props) {
  // 导航列表
  const nav:object[] = [
    { icon: <HomeOutlined />, text: "首页", path: "/home" },
    { icon: <SearchOutlined />, text: "找房", path: "/lookinghome" },
    { icon: <ProfileOutlined />, text: "咨询", path: "/consult" },
    { icon: <UserOutlined />, text: "我的", path: "/my" }
  ]

  const [currentIndex, setIndex] = useState<number>( parseInt(window.sessionStorage.getItem('currentNav') || "0"))

  const navChange = ( path:string, index:number ) => {
    props.history.push({pathname:path})
    setIndex(index)
    window.sessionStorage.setItem('currentNav', String(index))
  }
  
  return (
    <div className="index">
      {
        nav.map((item:any, index:number) => {
          return(
            <div className={ index === currentIndex ? 'item color' : 'item' } key={index} onClick={ ()=>navChange(item.path, index) }>
              <div className='icon'>{ item.icon }</div>
              <div className='text'>{ item.text }</div>
            </div>
          )
        })
      }
    </div>
  )
}


export default withRouter(IndexCom)